<template>
  <div>
    {{ $attrs }}
    <!-- <img :src="$attrs.src"  v-bind:a="obj.a"  :b="obj.b" alt=""> -->

    <img v-bind="$attrs" alt="">
    <button @click="btnClick">调用父组件方法</button>
    <!-- <button @click="$listeners.click">调用方法</button> -->
    <button v-on="$listeners">调用方法</button>
    <hr>
    <attrsSonSon v-bind="$attrs" v-on="$listeners" />
  </div>
</template>
<script>
import attrsSonSon from './attrsSonSon'
export default {
  components: {
    attrsSonSon
  },
  // 父组件在子组件标签上传入的属性默认是加到子组件最外层的，如果子组件内设置inheritAttrs: false表示 不接收传入的值在最外层
  //   inheritAttrs: false,
  //   $attrs:非props属性
  //   $listeners：拿到所有的父组件在子组件标签上绑定的方法
  //   props: ['src'],
  data() {
    return {
      obj: {
        a: 1,
        b: 2
      }
    }
  },
  methods: {
    btnClick() {
      //   this.$emit('fn')
      //   console.log(this.$listeners)
      this.$listeners.fn()
    }
  }
}
</script>
<style></style>
